<script setup lang="ts">
import { ref, watchEffect, computed } from 'vue'
import { NModal, NCard, NButton, NButtonGroup, NCheckbox, NCheckboxGroup, NSpace, NTabs, NTabPane } from 'naive-ui'

type Cities = {
  id: number
  order: number
  value: string[]
  name: string
}

const emit = defineEmits(['updateGoodsSkusCard'])
const skuCardList = defineModel<Api.Product.GoodsSkusListItem[]>('skuCardList')
const goodsSkusCard = defineModel<Api.Product.GoodsSkuInfoCard[]>('goodsSkusCard')
const visible = defineModel<boolean>('visible')

const cities = ref<{ [key: string]: Cities }>({})

const checkList = computed(() => {
  return skuCardList.value?.map((v) => v.default.split(',')) || []
})

const handleUpdateValue = (panel: Api.Product.GoodsSkusListItem, value: string[]) => {
  console.log('value', value)
  console.log('panel', panel)
  console.log('cities', cities.value)
  console.log('goodsSkusCard', goodsSkusCard.value)

  value.forEach((v) => {
    console.log('v_Value',v)
    console.log('v', cities.value[panel.name].value.includes(v))
    if (cities.value[panel.name].value.includes(v)) {
      console.log('del')
    } else {
      console.log('add')
    }
  })
}

const handlerSubmit = () => {
  Object.entries(cities.value).forEach(([key, item]) => {
    // console.log('key', key)
    // console.log('item', item)
    // console.log('goodsSkusCard', goodsSkusCard.value)
    console.log('item.value', item.value)
    goodsSkusCard.value?.forEach((v) => {
      if (v.name === key) {
        const defaultList = v.goodsSkusCardValue?.map((v) => v.value)
        item.value.forEach((v) => {
          if (!defaultList.includes(v)) {
            console.log('add')
          }
        })
      }
    })
  })
  // emit('updateGoodsSkusCard',)
}

watchEffect(() => {
  skuCardList.value?.forEach((v) => {
    cities.value[v.name] = {
      id: v.id,
      order: v.order,
      value: [],
      name: v.name
    }
  })
  goodsSkusCard.value?.forEach((v) => {
    cities.value[v.name] = {
      id: v.id,
      order: v.order,
      value: v.goodsSkusCardValue?.map((v) => v.value) || [],
      name: v.name
    }
  })
  console.log('cities', cities.value)
  console.log('skuCardList', skuCardList.value)
})
</script>

<template>
  <NModal v-model:show="visible">
    <NCard style="width: 600px" title="规格选择" :bordered="false" size="huge" role="dialog" aria-modal="true" closable
      @close="visible = false">
      <NTabs type="card" placement="left" tab-style="min-width: 80px;">
        <NTabPane v-for="(panel) in skuCardList" :key="panel.id" :tab="panel.name" :name="panel.name">
          <NCheckboxGroup v-model:value="cities[panel.name].value"
            @update:value="handleUpdateValue(panel, $event as string[])">
            <NSpace item-style="display: flex;">
              <NCheckbox v-for="item in panel.default.split(',')" :value="item" :label="item" />
            </NSpace>
          </NCheckboxGroup>
        </NTabPane>
      </NTabs>
      <template #footer>
        <NButtonGroup size="large" class="flex justify-end">
          <NButton>取消</NButton>
          <NButton type="info" @click="handlerSubmit">确定</NButton>
        </NButtonGroup>
      </template>
    </NCard>
  </NModal>

</template>
